<template>
  <div class="main">
    <el-col :span="24" class="elmenu">
      <aside :class="{showSidebar:!isCollapse}">
        <!--展开折叠开关-->
        <div class="menu-toggle" @click.prevent="Collapse">
          <i class="menufold" v-show="!isCollapse"></i>
          <i class="menuunfold" v-show="isCollapse"></i>
        </div>
        <!--导航菜单-->
        <el-menu default-active="1-1" class="menu-container" :collapse="isCollapse" :unique-opened='true' @select="handleSelect">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-mayi-user"></i>
              <span slot="title">我的信息</span>
            </template>
            <el-menu-item index="user/info">基本信息</el-menu-item>
            <el-menu-item index="user/address">收件地址</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">导航二</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-3">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <span slot="title">选项4</span>
              <el-menu-item index="1-4-1">选项1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="VueEditor">
            <i class="el-icon-document"></i>
            <span slot="title">富文本编辑器</span>
          </el-menu-item>
          <el-menu-item index="userManagement">
            <i class="el-icon-setting"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
          <el-menu-item index="Inquire">
            <i class="el-icon-search"></i>
            <span slot="title">归属地管理</span>
          </el-menu-item>
          <el-menu-item index="gridding">
            <i class="el-icon-setting"></i>
            <span slot="title">网格</span>
          </el-menu-item>
          <el-menu-item index="building">
            <i class="el-icon-document"></i>
            <span slot="title">楼院</span>
          </el-menu-item>
          <el-menu-item index="MenuList">
            <i class="el-icon-menu"></i>
            <span slot="title">菜单配置</span>
          </el-menu-item>
          <el-menu-item index="Character">
            <i class="el-icon-star-off"></i>
            <span slot="title">角色管理</span>
          </el-menu-item>
        </el-menu>
      </aside>
      <!--右侧内容区-->
      <section class="content-container" >
        <div class="grid-content bg-purple-light" >
          <div class="primary-container">
            <el-col :span="24" class="content-wrapper">
              <transition name="fade" mode="out-in">
                <router-view></router-view>
              </transition>
            </el-col>
          </div>
        </div>
      </section>
    </el-col>
  </div>
</template>
<script>
export default {
  data () {
    return {
      isCollapse: false
    }
  },
  methods: {
    handleSelect (index) {
      if (index === '') {
        this.$router.push({
          path: '/'
        })
      } else {
        this.$router.push({
          path: '/' + index
        })
      }
    },
    Collapse () {
      this.isCollapse = !this.isCollapse
    }
  }
}
</script>
<style>
  .el-menu--popup {
    background-color: rgb(50, 65, 87);
  }
  .el-menu-item{
    color: #fff;
  }
  .el-menu-item-group__title{
    color: #fff;
  }
  .el-submenu__title{
    color: #fff;
  }
  .el-menu-item:hover{
    color: rgb(50, 65, 87);
  }
  .el-menu-item-group__title:hover{
    background-color: #ecf5ff;
    color: rgb(50, 65, 87);
  }
  .el-submenu__title:hover{
    color: rgb(50, 65, 87);
  }
</style>
